<template>
  <div class="homeWrap">
    <!-- banner -->
    <header>
      <nav-bar ref="navBar"
               class="navBarCls"
               :scrollTop="scrollTop"
               transparentFixedFontColor="#333"
               fontColor="#333"
               type="transparentFixed"
               title="首页">
      </nav-bar>
      <special-banner :banner-list="bannerList"
                      class="swiperWrap"
                      :swiper-config="swiperConfig"></special-banner>
    </header>

    <!-- 金刚区 -->
    <nav class="uni-padding-wrap uni-common-mt">
      <view>
        <scroll-view class="NavScroll uni-row"
                     :scroll-x="true"
                     @scroll="scroll"
                     :show-scrollbar="false"
                     scroll-left="0">
          <view v-for="items in navData"
                :key="items"
                class="NavScrollItem">
            <view class="imgtab"></view>
            <span class="NavMore">{{items.text}}</span>
          </view>
        </scroll-view>
      </view>
    </nav>
    <!-- main -->
    <section class="uni-padding-wrap">
      <!-- 物业公告 -->
      <view class="message">
        <u-notice-bar mode="vertical"
                      type="warning"
                      :show="true"
                      :list="list"
                      :volume-icon="true"
                      :more-icon="true"
                      :duration="1500"
                      :autoplay="true"
                      :disable-touch="true"
                      color="#6e848f"
                      play-state="play"></u-notice-bar>
      </view>
      <!-- <view class="uni-flex message">
        <view class="message_title">物业公告</view>
        <view class="message_a_list">
          春节将至请注意防火防盗
        </view>
        <view class="message_more">查看更多 ></view>
      </view> -->
      <!-- 社区活动 -->
      <Card class="activeWrap"
            width='95%'
            tit="社区活动"
            footerInfo="查看更多活动   >"
            subTit="·   好吃好喝好玩的都到这">
        <scroll-view class="cardScroll"
                     slot="container"
                     :scroll-x="true"
                     scroll-left="0">
          <!-- 中间内容 -->
          <view class="cardArticle"
                v-for="i in 3"
                :key="i">
            <!-- 内容头部图片 -->
            <view class="cardAImarg">
              <!-- <img src=""
                   alt=""> -->
            </view>
            <!-- 内容中部信息 -->
            <div class="uni-flex cardAMain">
              <view class="Time">
                <view class="Day">24</view>
                <view class="Month">三月</view>
              </view>
              <view class="TitMain">
                <view class="Headline">品质生活嘉年华</view>
                <view class="Address">地址：广州市天河区天环广场</view>
                <view class="Deadline">报名截止时间：2021年4月8日</view>
              </view>
            </div>
            <!-- 内容脚脚 -->
            <view class="uni-flex cardAF">
              <p class="Look">快来看看吧</p>
              <button class="MiniBtn">进入</button>
            </view>

          </view>
        </scroll-view>
      </Card>
      <!-- 管家  -->
      <Card class="housekeeperWrap"
            width='95%'
            tit="明星管家"
            footerInfo="查看全部员工   >"
            subTit="·   请给出您珍贵的评价">
        <div slot="container"
             class="housekeeperContainer">
          <div :key="i"
               class="housekeeperItem"
               v-for="i in 3">

          </div>
        </div>
      </Card>
    </section>
  </div>
</template>

<script>
// import u-notice-bar from "@/uview-ui/components/"
import navBar from "@/components/navBar";
import SpecialBanner from '@/components/SpecialBanner.vue';
import Card from '@/components/Card.vue'
export default {
  components: { navBar, SpecialBanner, Card },
  data () {
    return {
      // 公告列表
      list: [],
      // 导航栏列表
      navData: [],
      // 金刚区
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      // 轮播图
      bannerList: [{
        picture: 'http://pp.rookiehao.cn/img/banner1.png'
      }, {
        picture: 'http://pp.rookiehao.cn/img/banner2.png'
      }, {
        picture: 'http://pp.rookiehao.cn/img/banner3.png'
      }, {
        picture: 'http://pp.rookiehao.cn/img/banner4.png'
      }, {
        picture: 'http://pp.rookiehao.cn/img/banner5.png'
      },],
      swiperConfig: {
        indicatorDots: true,
        indicatorColor: 'rgba(255, 255, 255, .4)',
        indicatorActiveColor: 'rgba(255, 255, 255, 1)',
        autoplay: false,
        interval: 3000,
        duration: 300,
        circular: true,
        previousMargin: '58rpx',
        nextMargin: '58rpx'
      }
    }
  },
  created () {
    console.log('crea');
  },
  onLoad () {
    this.$api.recommendedNews().then(news => {
      console.log(news);
    });

    this.$api.basisData().then(res => {
      res.items[0].map(item => {
        // notice=物业公告，menus=导航栏，banner=图片轮播
        if (item.type === "notice") {
          console.log("物业公告", item.data);
          this.list = item.data
        } else if (item.type === "menus") {
          console.log("导航栏", item.data);
          this.navData = item.data
        }
      })
      console.log("基础数据", res.items);

    }).catch(err => {
      console.log("基础数据出错了", err);
    })
  },
  methods: {

    scroll: function (e) {
      this.old.scrollTop = e.detail.scrollTop
    },
    goTop: function (e) {
      // 解决view层不同步的问题
      this.scrollTop = this.old.scrollTop
      this.$nextTick(function () {
        this.scrollTop = 0
      });
      uni.showToast({
        icon: "none",
        title: "纵向滚动 scrollTop 值已被修改为 0"
      })
    },

  }
  // TODO 修复Android v3 加载过慢问题
  // #ifdef APP-PLUS
  // var domModule = weex.requireModule('dom');
  // domModule.addRule('fontFace', {
  //   'fontFamily': "uniicons",
  //   'src': "url('/static/uni.ttf')"
  // });
  // #endif
};
</script>



<style lang="scss" scoped>
/* @import "../../../common/uni-nvue.css"; */

.homeWrap {
  width: 100%;

  //金刚区的nav
  //background-image: url("http://mini.live-easy.cn/static/mini/image/index_bg.png");
  padding-top: 130rpx;
  // background-color: #eee;
  .test {
    width: 750rpx;
    height: 50%;
    background: saddlebrown;
  }
  .navBarCls {
    // height: 130rpx;
    color: #333;
  }
  header {
    width: 100%;
  }
  //金刚区的nav
  .uni-common-mt {
    margin-top: 10rpx;
    position: relative;
    .NavScroll {
      white-space: nowrap;
      width: 90%;
      margin: 15rpx auto;
      display: flex;
      justify-content: space-between;
      .NavScrollItem {
        width: 150rpx;
        height: 168rpx;
        display: inline-block;
        background: #fff;
        box-shadow: 3rpx 9rpx 10rpx 0rpx rgba(68, 68, 68, 0.08);
        border-radius: 8rpx;
        text-align: center;
        margin-right: 34rpx;
        .imgtab {
          margin: 37rpx auto 16rpx;
          width: 55rpx;
          height: 55rpx;
          background: linear-gradient(0deg, #cdfaf2, #0db6bc);
          box-shadow: 4rpx 12rpx 17rpx 0rpx rgba(5, 116, 98, 0.13);
        }
        .NavMore {
          width: 95rpx;
          height: 21rpx;
          font-size: 22rpx;
          font-family: PingFang;
          font-weight: bold;
          color: #6e848f;
        }
      }
    }
  }
  section {
    width: 100%;
    //公告栏
    .message {
      width: 100%;
      height: 76rpx;
      white-space: nowrap;
      align-items: baseline;
      justify-content: space-between;
      margin: 30rpx auto;
      padding: 12rpx;
      border-top: solid 0.1rpx rgba(251, 92, 60, 0.035);
      border-bottom: solid 0.1rpx rgba(251, 92, 60, 0.035);

      .message_title {
        width: 120rpx;
        height: 50rpx;
        background: linear-gradient(90deg, #f4e19d, #e6ba09);
        opacity: 0.3;
        border-radius: 5rpx;
        line-height: 50rpx;
        text-align: center;
        span {
          width: 100rpx;
          height: 22rpx;
          font-size: 23rpx;
          font-family: PingFang;
          font-weight: bold;
          color: #000;
        }
      }
      .message_a_list {
        li {
          width: 386rpx;
          height: 30rpx;
          font-size: 28rpx;
          font-family: PingFang;
          font-weight: bold;
          color: #6e848f;
          text-align: center;
          list-style-type: none;
        }
      }
      .message_more {
        width: 136rpx;
        height: 20rpx;
        font-size: 20rpx;
        font-family: PingFang;
        font-weight: bold;
        color: #227fe8;
      }
    }
    // 社区活动
    .activeWrap {
      //中间
      .cardScroll {
        white-space: nowrap;
        width: 100%;
        .cardArticle {
          width: 447rpx;
          height: 388rpx;
          border: 1rpx solid #f2f2f2;
          box-shadow: 4rpx 12rpx 14rpx 1rpx rgba(1, 74, 44, 0.13);
          border-radius: 8rpx;
          margin: 27rpx 10rpx 42rpx 10rpx;
          display: inline-block;
          justify-content: space-around;

          //image
          .cardAImarg {
            width: 447rpx;
            height: 188rpx;
            background: #dab7b7;
            opacity: 0.6;
            border-radius: 8rpx;
            img {
              width: 100%;
              height: 100%;
            }
          }
          //Main
          .cardAMain {
            width: 447rpx;
            height: 124rpx;
            padding: 2rpx 12rpx;
            justify-content: center;
            align-items: center;
            // 时间
            .Time {
              .Day {
                font-size: 36rpx;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: #525252;
                margin-bottom: 11rpx;
              }
              .Month {
                font-size: 13rpx;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: #727171;
                float: right;
              }
            }
            //品质嘉年华部分的内容
            .TitMain {
              margin-left: 41rpx;
              .Headline {
                font-size: 26rpx;
                font-family: PingFang;
                font-weight: 500;
                color: #525252;
              }
              .Address {
                font-size: 16rpx;
                font-family: PingFang;
                font-weight: 500;
                color: #6e848f;
                margin: 10rpx 5rpx;
              }
              .Deadline {
                font-size: 16upx;
                font-family: PingFang;
                font-weight: 500;
                color: #6e848f;
              }
            }
          }
          // 中间内容的脚脚内容
          .cardAF {
            // width: 447rpx;
            height: 75rpx;
            align-items: baseline;
            justify-content: space-between;
            line-height: 75rpx;
            width: 94%;
            margin: 0 auto;
            .Look {
              width: 120rpx;
              height: 13rpx;
              font-size: 13rpx;
              font-family: PingFang;
              font-weight: 500;
              color: #6e848f;
            }
            .MiniBtn {
              display: inline-block;
              width: 130rpx;
              height: 38rpx;
              background: linear-gradient(90deg, #f6e3a3, #d29b07);
              box-shadow: 2rpx 8rpx 8rpx 0rpx rgba(102, 96, 1, 0.08);
              border-radius: 19rpx;
              font-size: 19rpx;
              font-family: PingFang;
              font-weight: 500;
              color: #ffffff;
              line-height: 35rpx;
              padding: 0;
              margin: 0;
            }
          }
        }
      }
    }
    .housekeeperWrap {
      .housekeeperContainer {
        display: flex;
        padding: 21rpx;
        justify-content: space-between;
        .housekeeperItem {
          width: 200rpx;
          height: 200rpx;
          background: #227fe8;
        }
      }
    }
  }
}
</style>
